<template>
  <div class="daily-article">
    <div class="top-title">请点击左侧文章查看文章详情谢谢</div>
    <div>
      <div class="daily-article-title">{{ articleInfo.title }}</div>
      <div class="daily-article-content" v-html="articleInfo.body"></div>
      <div class="daily-comments" v-show="comments.length">
        <span>评论({{ comments.length }})</span>
        <div
          class="daily-comment"
          v-for="comment in comments"
          :key="comment.id"
        >
          <div class="avatar">
            <img :src="comment.avatar" alt="" />
          </div>
          <div class="content">
            <div class="comment-name">{{ comment.author }}</div>
            <div class="comment-time" v-time="comment.time"></div>
          </div>
          <div class="text">{{ comment.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import time from "../directives/time";
import $ from "../utils/request";
export default {
  directives: { time },
  data() {
    return {
      articleInfo: {},
      comments: [],
    };
  },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    id: {
      handler(val) {
        if (val) this.getArticle();
      },
      immediate: true,
    },
  },
  mounted() {
    this.getArticle();
  },
  methods: {
    getArticle() {
      $.request.get("news/" + this.id).then((res) => {
        console.log(res);
        this.articleInfo = res;
        // 返回文章顶部
        window.scrollTo(0, 0);
        this.getComment();
      });
    },
    getComment() {
      $.request.get("story/" + this.id + "/short-comments").then((res) => {
        this.comments = res.comments;
      });
    },
  },
};
</script>

<style>
.daily-article {
  margin-left: 450px;
  padding: 20px;
}
.top-title {
  font-size: 35px;
  text-align: center;
  background: skyblue;
}
.daily-article-title {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  padding: 10px 0;
}
.daily-comments {
  margin: 10px 0;
}
.daily-comments span {
  display: block;
  margin: 10px 0;
  font-size: 20px;
}
.daily-comment {
  overflow: hidden;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e3e8ee;
}
.daily-comment .avatar {
  width: 50px;
  height: 50px;
  float: left;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
.content {
  margin-left: 65px;
}
.time {
  color: #9ea7b4;
  font-size: 14px;
  margin-top: 5px;
}
.text {
  margin-top: 10px;
}
.view-more a {
  display: block;
  cursor: pointer;
  background: #f5f7f9;
  text-align: center;
  color: inherit;
  text-decoration: none;
  padding: 4px 0;
  border-radius: 3px;
}
</style>